<template>
  <!-- 面板卡片 -->
  <view class="pane-card" @tap="handleNext">
    <view class="pane-header" v-if="$slots.header">
      <slot name="header"></slot>
    </view>
    <view class="pane-wrapper">
      <template v-if="$slots.icon">
        <view class="pane-wrapper">
          <view class="icon">
            <slot name="icon"></slot>
          </view>
          <view class="content">
            <view class="pane-main">
              <slot name="title">
                <text class="title" v-if="title">{{ title }}</text>
                  <view :class="{ tag: true, error: tagError }" v-if="tag">
                    <text>{{ tag }}</text>
                  </view>
              </slot>
            </view>
            <view class="sub-title">
              <slot name="subtitle">
                <text>{{ subTitle }}</text>
              </slot>
            </view>
          </view>
        </view>
      </template>
      <template v-else>
        <view class="content">
          <view class="pane-main">
            <slot name="title">
              <text class="title">{{ title }}</text>
                <view :class="{ tag: true, error: tagError }" v-if="tag">
                  <text>{{ tag }}</text>
                </view>
            </slot>
          </view>
          <view class="sub-title">
            <slot name="subtitle">
              <text>{{ subTitle }}</text>
            </slot>
          </view>
        </view>
      </template>
      <view class="right">
        <slot name="right">
          <view class="pane-next" v-if="next">
            <view class="badge" v-if="badge"></view>
            <m-icon color="#666666" type="arrowright"></m-icon>
          </view>
        </slot>
      </view>
    </view>
  </view>
</template>
<script>
  import MIcon from '@/components/m-icon/m-icon.vue';
  export default {
    components: {
      MIcon
    },
    props: {
      id: [String, Number],
      title: String,
      icon: String,
      subTitle: String,
      tag: String,
      tagError: Boolean,
      badge: Boolean,
      next: [String, Boolean]
    },
    methods: {
      handleNext() {
        this.$emit('onNext', this.id);
        if (this.next && typeof this.next === 'string') {
          uni.navigateTo({
            url: this.next
          });
        }
      }
    }
  };
</script>
<style lang="scss">
  .pane {
    &-card {
      padding: 0rpx 40rpx 0rpx 40rpx;
      margin-bottom: 32rpx;
      background-color: rgba(255, 255, 255, 1);
      border-radius: 24rpx;
      box-shadow: 0px 0px 30rpx rgb(41 132 248 / 10%);
    }

    &-header {
      padding: 20rpx 0 12rpx 0;
      width: 100%;
      display: block;
      border-bottom: 1rpx solid rgba($color: $uni-text-color-disable, $alpha: 0.4);
    }

    &-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .icon {
        margin-right: 36rpx;
      }

      .content {
        padding: 24rpx 0 30rpx 0;
        line-height: 2;
        flex: 1;
      }

      .right {
        display: flex;
        align-items: center;
      }

      .title {
        font-size: 36rpx;
      }

      .sub-title {
        font-size: 28rpx;
        color: $uni-sub-text-color;
      }

      .tag {
        margin-left: 20rpx;
        padding: 0rpx 28rpx;
        display: inline-block;
        background-color: rgba($color: $uni-color-success, $alpha: 0.2);
        border-radius: 12rpx;
        line-height: 1.5;
        font-size: 28rpx;

        text {
          color: $uni-color-success;
        }

        &.error {
          background-color: rgba($color: $uni-color-error, $alpha: 0.2);

          text {
            color: $uni-color-error;
          }
        }
      }
    }

    &-next {
      display: flex;
      align-items: center;

      .badge {
        margin-right: 4rpx;
        width: 12rpx;
        height: 12rpx;
        border-radius: 50%;
        background-color: $uni-color-error;
      }
    }
  }
</style>